<template>
  <div class="step_box">
    <div
      class="heade_titel font_18 font_weight_500"
      style="color: #191b1e; padding: 20px; border-bottom: 1px solid #e8eaec"
    >
      监控预警
    </div>
    <div class="setting_content">
        <div class="card_title flexbox flexbetween flexcenter">
            <div >
                <p class="font_16 font_weight_500" style="color: #191B1E;margin-bottom: 4px">1. 固定条件</p> 
                <p class="font_14" style="color: #5c636c">符合以下设置范围内的计划，将执行监控策略</p> 
            </div>
        </div>
        <div class="card_range">
            <el-form label-position="top" :inline="true" label-width="80px" :model="formLabelrange" :hide-required-asterisk='true' ref="formLabelrangeForm">
                <el-form-item   prop="qc_delivery_monitoring_cost_left" :rules="group">
                    <div slot="label">
                       <div>计划总消耗范围</div>
                    </div>
                    <div class="flexbox flexcenter">
                     <el-input v-model="formLabelrange.qc_delivery_monitoring_cost_left" autocomplete="off" size="small" placeholder="请输入"></el-input>
                    </div>
                </el-form-item>
                <el-form-item   prop="qc_delivery_monitoring_cost_right" :rules="group">
                    <div slot="label">
                        <div class="test" style="height: 22px;width: 20px;"></div>
                    </div>
                    <div class="flexbox flexcenter">
                        <span style="color:#ACB2BB;padding-right:4px"> - </span>
                     <el-input v-model="formLabelrange.qc_delivery_monitoring_cost_right"  size="small" placeholder="请输入"></el-input>
                    </div>
                </el-form-item>
                <!-- :rules="[{ type: 'number', message: '必须为数字值'}]" -->
                <el-form-item prop="qc_delivery_monitoring_roi_left"  :rules="group">
                    <div slot="label">
                        <el-select v-model="formLabelrange.qc_delivery_monitoring_roi_type" placeholder="请选择" size="small" class="select_label select_label_1">
                            <el-option label="直接roi范围" value="0"></el-option>
                            <el-option label="7日roi范围" value="1"></el-option>
                        </el-select>
                    </div>
                    <div class="flexbox flexcenter">
                     <el-input v-model="formLabelrange.qc_delivery_monitoring_roi_left"  size="small" placeholder="请输入"></el-input>
                    </div>
                </el-form-item>
                <el-form-item prop="qc_delivery_monitoring_roi_right" :rules="group" >
                    <div slot="label">
                       <div class="test" style="height: 22px;width: 20px;"></div>
                    </div>
                    <div class="flexbox flexcenter">
                        <span style="color:#ACB2BB;padding-right:4px">-</span>
                        <el-input v-model="formLabelrange.qc_delivery_monitoring_roi_right"  size="small" placeholder="请输入"></el-input>
                    </div>
                </el-form-item>
            </el-form>
        </div>
         <div class="card_title flexbox flexbetween flexcenter" style="margin-top: 20px">
            <div >
                <p class="font_16 font_weight_500" style="color: #191B1E;margin-bottom: 4px">2. 预警类型设置</p> 
                <p class="font_14" style="color: #5c636c">当触发以下指定条件时，系统将自动发送提醒消息</p> 
            </div>
        </div>
        <div class="card_setting">
          <div class="card_setting_add card_title flexbox flexcenter">
            <div class="flexbox flexcenter add_btn" :class="{disabled:card_1}" @click="addCard(1)">
                <svg style="margin-right: 4px" v-if="!card_1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10.834 4.79165C10.834 4.33141 10.4609 3.95831 10.0007 3.95831C9.54041 3.95831 9.16732 4.33141 9.16732 4.79165V9.16665H4.79232C4.33208 9.16665 3.95898 9.53974 3.95898 9.99998C3.95898 10.4602 4.33208 10.8333 4.79232 10.8333H9.16732V15.2083C9.16732 15.6686 9.54041 16.0416 10.0007 16.0416C10.4609 16.0416 10.834 15.6686 10.834 15.2083V10.8333H15.209C15.6692 10.8333 16.0423 10.4602 16.0423 9.99998C16.0423 9.53974 15.6692 9.16665 15.209 9.16665H10.834V4.79165Z" fill="#5C636C"/></svg>
                <svg style="margin-right: 4px" v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10.834 4.79165C10.834 4.33141 10.4609 3.95831 10.0007 3.95831C9.54041 3.95831 9.16732 4.33141 9.16732 4.79165V9.16665H4.79232C4.33208 9.16665 3.95898 9.53974 3.95898 9.99998C3.95898 10.4602 4.33208 10.8333 4.79232 10.8333H9.16732V15.2083C9.16732 15.6686 9.54041 16.0416 10.0007 16.0416C10.4609 16.0416 10.834 15.6686 10.834 15.2083V10.8333H15.209C15.6692 10.8333 16.0423 10.4602 16.0423 9.99998C16.0423 9.53974 15.6692 9.16665 15.209 9.16665H10.834V4.79165Z" fill="#D7DADE"/></svg>
                预算不足预警
            </div>
            <div class="flexbox flexcenter add_btn" :class="{disabled:card_2}" @click="addCard(2)">
                <svg style="margin-right: 4px" v-if="!card_2" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10.834 4.79165C10.834 4.33141 10.4609 3.95831 10.0007 3.95831C9.54041 3.95831 9.16732 4.33141 9.16732 4.79165V9.16665H4.79232C4.33208 9.16665 3.95898 9.53974 3.95898 9.99998C3.95898 10.4602 4.33208 10.8333 4.79232 10.8333H9.16732V15.2083C9.16732 15.6686 9.54041 16.0416 10.0007 16.0416C10.4609 16.0416 10.834 15.6686 10.834 15.2083V10.8333H15.209C15.6692 10.8333 16.0423 10.4602 16.0423 9.99998C16.0423 9.53974 15.6692 9.16665 15.209 9.16665H10.834V4.79165Z" fill="#5C636C"/></svg>
                <svg style="margin-right: 4px" v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10.834 4.79165C10.834 4.33141 10.4609 3.95831 10.0007 3.95831C9.54041 3.95831 9.16732 4.33141 9.16732 4.79165V9.16665H4.79232C4.33208 9.16665 3.95898 9.53974 3.95898 9.99998C3.95898 10.4602 4.33208 10.8333 4.79232 10.8333H9.16732V15.2083C9.16732 15.6686 9.54041 16.0416 10.0007 16.0416C10.4609 16.0416 10.834 15.6686 10.834 15.2083V10.8333H15.209C15.6692 10.8333 16.0423 10.4602 16.0423 9.99998C16.0423 9.53974 15.6692 9.16665 15.209 9.16665H10.834V4.79165Z" fill="#D7DADE"/></svg>
                计划闲置预警
            </div>
            <div class="flexbox flexcenter add_btn" :class="{disabled:card_3}" @click="addCard(3)">
                <svg style="margin-right: 4px" v-if="!card_3" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10.834 4.79165C10.834 4.33141 10.4609 3.95831 10.0007 3.95831C9.54041 3.95831 9.16732 4.33141 9.16732 4.79165V9.16665H4.79232C4.33208 9.16665 3.95898 9.53974 3.95898 9.99998C3.95898 10.4602 4.33208 10.8333 4.79232 10.8333H9.16732V15.2083C9.16732 15.6686 9.54041 16.0416 10.0007 16.0416C10.4609 16.0416 10.834 15.6686 10.834 15.2083V10.8333H15.209C15.6692 10.8333 16.0423 10.4602 16.0423 9.99998C16.0423 9.53974 15.6692 9.16665 15.209 9.16665H10.834V4.79165Z" fill="#5C636C"/></svg>
                <svg style="margin-right: 4px" v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10.834 4.79165C10.834 4.33141 10.4609 3.95831 10.0007 3.95831C9.54041 3.95831 9.16732 4.33141 9.16732 4.79165V9.16665H4.79232C4.33208 9.16665 3.95898 9.53974 3.95898 9.99998C3.95898 10.4602 4.33208 10.8333 4.79232 10.8333H9.16732V15.2083C9.16732 15.6686 9.54041 16.0416 10.0007 16.0416C10.4609 16.0416 10.834 15.6686 10.834 15.2083V10.8333H15.209C15.6692 10.8333 16.0423 10.4602 16.0423 9.99998C16.0423 9.53974 15.6692 9.16665 15.209 9.16665H10.834V4.79165Z" fill="#D7DADE"/></svg>
                消耗骤减预警
            </div>
          </div>
          <div class="card_value" v-if="card_1">
            <div class="card_value_title flexbox flexcenter flexbetween"><span>预算不足预警</span> <img @click="delCard(1)" src="@/assets/img/del_icon.svg"/></div>
            <div class="flexbox flexcenter">
                <div class="nav flexbox flexcenter flexjust">#</div>
                <div class="font_14" style="color:#5C636C">
                    当计划预算消耗大于 
                    <el-input v-model="cardAlerts_1.cost"  placeholder="输入值" size="small" style="width:80px"> <div slot="suffix" class="height_100 flexbox flexcenter" style="color: #191B1E;">%</div></el-input>
                    且未增加预算时，则提醒增加预算
                </div>
            </div>
          </div>
          <div class="card_value" v-if="card_2">
            <div class="card_value_title flexbox flexcenter flexbetween"><span>计划闲置预警</span> <img @click="delCard(2)" src="@/assets/img/del_icon.svg"/></div>
            <div class="flexbox flexcenter">
                <div class="nav flexbox flexcenter flexjust">#</div>
                <div class="font_14" style="color:#5C636C">
                    当计划在 
                    <el-select v-model="cardAlerts_2.segmentation" placeholder="请选择" size="small" class="select_label">
                            <el-option label="30分钟" value="30"></el-option>
                            <el-option label="60分钟" value="60"></el-option>
                    </el-select>
                    内的消耗小于
                    <el-input v-model="cardAlerts_2.cost"  placeholder="输入值" size="small" style="width:80px"><div slot="prefix" class="height_100 flexbox flexcenter" style="color: #191B1E;">¥</div></el-input>
                    时，则提醒调整计划
                </div>
            </div>
          </div>
          <div class="card_value" v-if="card_3">
            <div class="card_value_title flexbox flexcenter flexbetween"><span>消耗骤减预警</span> <img  @click="delCard(3)" src="@/assets/img/del_icon.svg"/></div>
            <div class="flexbox flexcenter">
                <div class="nav flexbox flexcenter flexjust">#</div>
                <div class="font_14" style="color:#5C636C">
                    当计划在
                     <el-select v-model="cardAlerts_3.segmentation" placeholder="请选择" size="small" class="select_label">
                            <el-option label="30分钟" value="30"></el-option>
                            <el-option label="60分钟" value="60"></el-option>
                    </el-select>
                    内的消耗同上个时段的消耗减少
                    <el-input v-model="cardAlerts_3.cost" placeholder="输入值"  size="small" style="width:80px"><div slot="prefix" class="height_100 flexbox flexcenter" style="color: #191B1E;">¥</div> </el-input>
                    时，则提醒调整计划
                </div>
            </div>
          </div>
        </div>
    </div>
    <div class="next_box flexbox flexcenter">
        <div class="warn_btn font_14 cancel flexbox flexcenter flexjust" style="margin-right:12px" @click="prevStep">上一步</div>
        <el-button type="primary" class="custom_btn"  size="medium" @click="nextStep()">下一步</el-button>
    </div>
    
  </div>
</template>

<script>
export default {
    data() {
        var maxValue = (rule, value, callback) => {
            if (Number(value) > 900000) {
                callback(new Error("数值不能超过900000"));
            }
            callback();
        };
        return {
            card_1:false,
            card_2:false,
            card_3:false,
            loading:false,
            formLabelrange:{
                qc_delivery_monitoring_cost_left:"",
                qc_delivery_monitoring_cost_right:"",
                qc_delivery_monitoring_roi_left:"",
                qc_delivery_monitoring_roi_right:"",
                qc_delivery_monitoring_roi_type:"0"
            },
            cardAlerts_1:{
                    monitoring_type:"1",
                    cost:"",
                    segmentation:"30"
                },
            cardAlerts_2:{
                    monitoring_type:"2",
                    cost:"",
                    segmentation:"30"
                },
            cardAlerts_3:{
                    monitoring_type:"3",
                    cost:"",
                    segmentation:"30"
                },
            group: [
                    {
                        required: true,
                        message: "请输入",
                        trigger: ["blur", "change"],
                    },
                    {
                        pattern:
                            /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                        required: true,
                        message: "请输入正确数值",
                        trigger: ["blur", "change"],
                    },
                    { validator: maxValue, trigger: ["blur", "change"] },
                ],
                
        }
    },
    watch: {
        'formLabelrange':{
            handler(newValue, oldValue) {
                this.$parent.formLabelrange = newValue;
                console.log(newValue,oldValue)
            },
            immediate:true,
            deep:true
        },
        'card_1':{
            handler(newValue, oldValue) {
                if(newValue){
                    this.$parent.remind.push('1')
                }else{
                    this.$parent.remind = this.$parent.remind.filter(item => item != '1')
                }
            },
            immediate:true,
        },
        'card_2':{
            handler(newValue, oldValue) {
                if(newValue){
                    this.$parent.remind.push('2')
                }else{
                    this.$parent.remind = this.$parent.remind.filter(item => item != '2')
                }
            },
            immediate:true,
        },
        'card_3':{
            handler(newValue, oldValue) {
                if(newValue){
                    this.$parent.remind.push('3')
                }else{
                    this.$parent.remind = this.$parent.remind.filter(item => item != '3')
                }
            },
            immediate:true,
        },
    },
    mounted() {
    },
    methods: {
       addCard(val){
            this[`card_${val}`] = true;
       },
       delCard(val){
            this[`card_${val}`] = false;
            this[`cardAlerts_${val}`] = {monitoring_type: val,cost:"",segmentation:""}
       },
       prevStep(){
           this.$emit("Card_NextStep",'WarnStepB',false,1);
       },
        isValidInteger(input) {  
            // 使用正则表达式来校验输入  
        return /^-?\d+$/.test(input);  
        } ,
      async nextStep(){
        let state = null;
        try {  
            await this.$refs.formLabelrangeForm.validate(); // 等待表单验证完成  
            state = true; 
        } catch (err) {  
            state = false; 
        }  
            if(state){
            if(this.card_1 || this.card_2 || this.card_3){
                
            }else{
                 this.$message.warning('请选择最少一种条件预警类型');
                 return false;
            }
            if(this.card_1 && this.cardAlerts_1.cost == ""){
                 this.$message.warning('请完善预算不足预警');
                 return false;
            }
            if(this.card_2 && this.cardAlerts_2.cost == ""){
                 this.$message.warning('请完善计划闲置预警');
                 return false;
            }
            if(this.card_3 && this.cardAlerts_3.cost == ""){
                 this.$message.warning('请完善消耗骤减预警');
                 return false;
            }
            let arr = [];
            if(this.card_1){
                let vail = this.isValidInteger(this.cardAlerts_1.cost)
                let num = this.cardAlerts_1.cost > 0;
                if(!vail || !num){
                    this.$message.warning('请预警类型消耗 只能为 整数 且大于0')
                    return false;
                }
                arr.push(this.cardAlerts_1)
            }
            if(this.card_2){
                let vail = this.isValidInteger(this.cardAlerts_2.cost)
                let num = this.cardAlerts_2.cost > 0;
                if(!vail || !num){
                    this.$message.warning('请预警类型消耗 只能为 整数 且大于0')
                    return false;
                }
                arr.push(this.cardAlerts_2)
            }
            if(this.card_3){
                let vail = this.isValidInteger(this.cardAlerts_3.cost)
                let num = this.cardAlerts_3.cost > 0;
                if(!vail || !num) {
                    this.$message.warning('请预警类型消耗 只能为 整数 且大于0');
                    return false;
                }
                arr.push(this.cardAlerts_3)
            }
            let  data = {
                    'qc_delivery_monitoring_cost_left':this.formLabelrange.qc_delivery_monitoring_cost_left,
                    'qc_delivery_monitoring_cost_right':this.formLabelrange.qc_delivery_monitoring_cost_right,
                    'qc_delivery_monitoring_roi_type':this.formLabelrange.qc_delivery_monitoring_roi_type,
                    'qc_delivery_monitoring_roi_left':this.formLabelrange.qc_delivery_monitoring_roi_left,
                    'qc_delivery_monitoring_roi_right':this.formLabelrange.qc_delivery_monitoring_roi_right,
                    'alerts_list':arr
                }
                this.$emit("Card_NextStep",'WarnStepB',true,3,data);
                return true;
            }else{
                return false;
            }
            // this.$refs.formLabelrangeForm.validate((valid) => {
            // if (!valid) return false;
            // if(this.card_1 || this.card_2 || this.card_3){
                
            // }else{
            //      this.$message.warning('请选择最少一种条件预警类型');
            //      return false;
            // }
            // if(this.card_1 && this.cardAlerts_1.cost == ""){
            //      this.$message.warning('请完善预算不足预警');
            //      return false;
            // }
            // if(this.card_2 && this.cardAlerts_2.cost == ""){
            //      this.$message.warning('请完善计划闲置预警');
            //      return false;
            // }
            // if(this.card_3 && this.cardAlerts_3.cost == ""){
            //      this.$message.warning('请完善消耗骤减预警');
            //      return false;
            // }
            // let arr = [];
            // if(this.card_1){
            //     let vail = this.isValidInteger(this.cardAlerts_1.cost)
            //     let num = this.cardAlerts_1.cost > 0;
            //     if(!vail || !num){
            //         this.$message.warning('请预警类型消耗 只能为 整数 且大于0')
            //         return false;
            //     }
            //     arr.push(this.cardAlerts_1)
            // }
            // if(this.card_2){
            //     let vail = this.isValidInteger(this.cardAlerts_2.cost)
            //     let num = this.cardAlerts_2.cost > 0;
            //     if(!vail || !num){
            //         this.$message.warning('请预警类型消耗 只能为 整数 且大于0')
            //         return false;
            //     }
            //     arr.push(this.cardAlerts_2)
            // }
            // if(this.card_3){
            //     let vail = this.isValidInteger(this.cardAlerts_3.cost)
            //     let num = this.cardAlerts_3.cost > 0;
            //     if(!vail || !num) {
            //         this.$message.warning('请预警类型消耗 只能为 整数 且大于0');
            //         return false;
            //     }
            //     arr.push(this.cardAlerts_3)
            // }
            // let  data = {
            //         'qc_delivery_monitoring_cost_left':this.formLabelrange.qc_delivery_monitoring_cost_left,
            //         'qc_delivery_monitoring_cost_right':this.formLabelrange.qc_delivery_monitoring_cost_right,
            //         'qc_delivery_monitoring_roi_type':this.formLabelrange.qc_delivery_monitoring_roi_type,
            //         'qc_delivery_monitoring_roi_left':this.formLabelrange.qc_delivery_monitoring_roi_left,
            //         'qc_delivery_monitoring_roi_right':this.formLabelrange.qc_delivery_monitoring_roi_right,
            //         'alerts_list':arr
            //     }
            //     this.$emit("Card_NextStep",'WarnStepB',true,3,data);
            //     return true;
            // });
        }
    },
    components: {
    }
};
</script>

<style scoped>
/deep/ .el-form--label-top .el-form-item__label{
    margin-bottom: 6px !important;
    line-height: 22px;
    padding: 0 !important;
}
/deep/ .el-form .el-form-item:nth-child(2){
    margin-right: 35px;
}
/deep/ .el-form-item{
    margin-bottom: 0 !important;
}
.card_value >>> .select_label .el-input{
        width: 86px;
}
.card_value >>> .el-input__inner{
    border: none;
    height: 28px;
    line-height: 28px;
    background: #F8F8F9;
}
.card_value >>> .el-input--suffix .el-input__inner{
    padding-right: 22px !important;
}
.card_value >>> .el-input--prefix .el-input__inner{
    padding-left: 20px !important;
}

.card_range >>> .select_label  .el-input__inner{
    height: 22px;
    width: 120px !important;
    border: none;
    background: #F8F8F9;
    padding-left: 0;
}
.card_range >>> .select_label .el-input__suffix{
    right: 30px !important;
}
.card_range >>> .select_label .el-input--small .el-input__icon{
    line-height: 22px !important;
}
.card_range >>> .el-input--small .el-input__inner{
    width: 120px;
    /* border: none !important; */
}
.custom_btn{
    width: 100px;
    background: #165DFF; 
    border-radius: 8px;
}
.step_box{
    width: 100%;
    height: 100%;
}
.setting_content{
    padding: 20px 20px 0 20px;
}
.card_title{
    margin-bottom: 12px;
}
.card_range{
    background: #F8F8F9;
    border-radius: 12px;
    padding: 16px;
    width: 623px;
}
.add_btn{
    color: #5C636C;
    cursor: pointer;
    border-radius: 8px;
    border: 1px dashed #E8EAEC;
    margin-right: 12px;
    line-height: 36px;
    padding: 0 8px;
    font-size: 14px;
    font-weight: 500;
}
.card_value{
    width: 623px;
    border:1px solid #E8EAEC;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 8px;
}
.card_value_title{
    color: #191B1E;
    margin-bottom: 16px;
}
.card_value_title img{
    cursor: pointer;
}
.nav{
    height: 20px;
    width: 20px;
    margin-right: 8px;
    border-radius: 4px;
    color: #5287FF;
    background:#F5F7FF;
}
.disabled{
    background: #F8F8F9;
    border-color: #D7DADE;
    color: #D7DADE;
    cursor: not-allowed;
}
.warn_btn{
    cursor: pointer;
    width: 98px;
    height: 34px;
}
.cancel{
    border-radius: 8px;
    border: 1px solid #E8EAEC;
    background: #FBFBFC;
    color: #5C636C;
}
.next_box{
    position: fixed;
    bottom: 32px;
    margin-left: 20px;
}
</style>